<template>
  <div class="user">
    <div class="user-left">
      <dv-border-box1 style="width: 100%; height: 100%">
        <UseeMainLine
          :file_id_show="file_id_show"
          :data_volt_show="data_volt_show"
        ></UseeMainLine>
      </dv-border-box1>
    </div>
    <div class="user-right">
      <div class="user-right-top">
        <dv-border-box8 style="width: 100%; height: 100%">
          <UserColumnar :file_id_show="file_id_show" :lof="lof"></UserColumnar>
          <dv-decoration-10 style="width: 100%; height: 5px" />
        </dv-border-box8>
      </div>
      <div class="user-right-bottom">
        <dv-border-box8 style="width: 100%; height: 100%">
          <UserLine
            :dict_unusualDetail="dict_unusualDetail"
            :dict_unusualCopy="dict_unusualCopy"
            :file_id_show="file_id_show"
          ></UserLine>
        </dv-border-box8>
      </div>
    </div>
  </div>
</template>

<script setup>
import UseeMainLine from "./UseeMainLine";
import UserColumnar from "./UserColumnar";
import UserLine from "./UserLine";
import { onMounted, ref } from "vue";
import { postUser } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const file_id_show = ref([
  3011003007, 3011003013, 3011018035, 3011018036, 3011018037, 3011018038,
  3011018039, 3011018040, 3011018041, 3011018042, 3011018043, 3011018044,
  3011018068, 3011018419, 3011018420,
]);
const data_volt_show = ref([
  [
    240.4, 240.8, 239.5, 240.0, 240.4, 241.8, 240.2, 239.2, 237.4, 238.9, 237.5,
    236.7, 238.8, 237.6, 238.3, 238.6, 237.0, 237.7, 238.2, 237.6, 236.3, 238.5,
    237.4, 237.1, 236.8, 237.9, 238.9, 239.2, 239.0, 240.1, 240.4,
  ],
  [
    240.6, 240.7, 239.4, 240.2, 240.2, 241.6, 240.6, 239.7, 236.5, 238.4, 237.4,
    237.4, 238.5, 237.2, 238.3, 239.2, 237.6, 237.8, 237.9, 237.0, 236.8, 238.2,
    237.1, 237.3, 237.5, 238.5, 238.8, 238.1, 239.4, 240.2, 240.1,
  ],
  [
    240.6, 240.6, 240.1, 240.0, 240.2, 241.6, 240.3, 239.2, 238.0, 238.1, 238.2,
    237.8, 238.5, 237.9, 238.5, 239.0, 237.1, 238.2, 238.5, 237.8, 237.0, 238.1,
    237.9, 237.6, 237.6, 239.0, 238.8, 238.6, 238.8, 240.4, 240.9,
  ],
  [
    240.7, 240.7, 240.2, 240.3, 240.4, 241.7, 240.4, 239.7, 237.4, 239.1, 238.5,
    237.3, 237.6, 237.6, 237.7, 239.2, 237.5, 238.2, 238.5, 238.3, 237.2, 238.1,
    237.7, 237.9, 237.4, 239.2, 239.0, 238.9, 239.5, 240.7, 240.6,
  ],
  [
    240.5, 241.0, 240.0, 240.0, 240.3, 241.6, 240.2, 239.2, 238.2, 238.0, 238.1,
    237.6, 238.5, 238.0, 238.0, 239.0, 237.1, 238.4, 238.4, 237.8, 236.9, 238.4,
    237.9, 237.5, 237.5, 238.7, 239.0, 238.6, 239.2, 240.4, 240.6,
  ],
  [
    240.5, 240.9, 240.1, 240.1, 240.4, 241.6, 240.5, 238.5, 238.2, 238.1, 238.0,
    237.8, 238.9, 237.5, 238.2, 238.6, 237.0, 238.5, 238.3, 237.9, 236.5, 238.5,
    238.0, 237.4, 237.5, 239.0, 239.0, 238.7, 238.9, 240.2, 240.6,
  ],
  [
    240.7, 241.0, 240.2, 240.2, 240.5, 241.8, 240.8, 239.4, 238.2, 238.4, 238.2,
    237.8, 239.3, 238.0, 238.3, 238.6, 237.1, 238.4, 238.5, 238.0, 236.6, 238.7,
    238.4, 237.5, 237.8, 239.1, 239.3, 238.9, 239.5, 240.5, 240.8,
  ],
  [
    240.7, 241.0, 240.3, 240.2, 240.6, 241.8, 240.5, 239.6, 238.0, 238.7, 238.7,
    238.0, 238.6, 237.8, 237.8, 238.4, 237.6, 238.3, 238.6, 238.3, 237.4, 238.2,
    238.0, 237.7, 237.5, 239.2, 239.2, 239.1, 239.3, 240.7, 240.8,
  ],
  [
    240.4, 240.7, 240.1, 239.9, 240.3, 241.5, 240.3, 239.4, 237.9, 238.3, 238.4,
    237.7, 238.4, 237.9, 238.2, 239.0, 237.3, 238.0, 238.3, 238.0, 236.9, 237.9,
    238.0, 237.6, 237.6, 239.0, 238.9, 238.7, 239.1, 240.5, 240.5,
  ],
  [
    240.5, 240.8, 240.0, 240.0, 240.4, 241.6, 240.5, 239.2, 238.1, 238.2, 237.9,
    237.7, 239.0, 237.8, 238.2, 238.2, 237.0, 238.3, 238.4, 237.5, 236.4, 238.4,
    237.9, 237.3, 237.4, 239.0, 239.1, 238.6, 239.2, 240.3, 240.6,
  ],
  [
    240.3, 240.5, 239.9, 239.8, 240.2, 241.4, 240.3, 239.1, 238.0, 238.2, 238.3,
    237.6, 238.5, 237.7, 238.2, 238.2, 237.1, 237.9, 238.2, 237.9, 236.7, 237.8,
    237.8, 237.5, 237.6, 238.9, 238.6, 238.6, 238.7, 240.3, 240.5,
  ],
  [
    240.6, 240.4, 240.0, 240.0, 240.3, 241.5, 240.4, 239.5, 237.7, 239.0, 238.0,
    237.8, 237.3, 237.4, 237.7, 239.3, 237.4, 238.3, 238.6, 238.1, 237.2, 237.7,
    238.0, 237.6, 237.5, 239.0, 238.8, 238.7, 239.4, 240.3, 240.3,
  ],
  [
    241.3, 241.4, 240.7, 240.5, 241.0, 241.8, 241.3, 240.4, 238.5, 239.5, 239.2,
    238.0, 239.3, 238.4, 238.3, 239.1, 237.8, 238.8, 238.6, 238.2, 237.2, 238.7,
    238.4, 237.6, 237.5, 238.3, 238.0, 239.2, 240.1, 240.9, 240.7,
  ],
  [
    240.0, 240.7, 239.8, 240.0, 239.9, 241.3, 240.1, 237.8, 237.5, 238.6, 238.2,
    237.2, 238.0, 236.3, 237.9, 238.7, 236.8, 237.0, 237.8, 237.4, 236.3, 237.7,
    237.6, 237.4, 237.2, 237.8, 238.3, 237.1, 237.6, 240.2, 240.2,
  ],
  [
    240.2, 240.7, 239.8, 240.3, 240.2, 241.5, 240.3, 237.9, 236.8, 238.9, 238.1,
    237.6, 237.1, 236.4, 237.5, 238.9, 237.0, 237.9, 238.2, 237.7, 236.8, 237.4,
    237.8, 237.4, 236.9, 238.5, 238.3, 237.4, 237.7, 240.3, 240.2,
  ],
]);
const lof = ref([
  1.0569842831835674, 1.0499214851623455, 0.9184522219710635,
  0.9804973412351103, 0.9116923319977759, 0.9262514411804537,
  0.9855073133338912, 0.9454236525641596, 0.877728103309737, 0.9223986831134514,
  0.8760018454832945, 0.9127546352479495, 1.0605284007516103,
  1.1285001851183178, 1.1429768909028426,
]);
let dict_unusual = ref({
  3011003007: "void",
  3011003013: "void",
  3011018068: "void",
  3011018419: "void",
  3011018420: "void",
});
let dict_unusualCopy = ref([]);
for (const key in dict_unusual.value) {
  dict_unusualCopy.value.push(key);
}
const dict_unusualDetail = ref([]);
file_id_show.value.map((item, index) => {
  if (dict_unusual.value[item]) {
    console.log(index);
    dict_unusualDetail.value.push(data_volt_show.value[index]);
  }
  // console.log(dict_unusual.value[item]);
});
console.log(dict_unusualDetail.value, "dict_unusualDetail");
const initPostUser = async () => {
  const res = await postUser({ file_name: route.query.file_name });
  file_id_show.value = res.results[0].file_id_show;
  data_volt_show.value = res.results[0].data_volt_show;
  lof.value = res.results[0].lof;
  // 异常数据;
  dict_unusual.value = res.results[0].dict_unusual;
  let dict_unusualCopy = ref([]);
  for (const key in dict_unusual.value) {
    dict_unusualCopy.value.push(key);
  }
  file_id_show.value.map((item, index) => {
    if (dict_unusual.value[item]) {
      console.log(index);
      dict_unusualDetail.value.push(data_volt_show.value[index]);
    }
  });
  console.log(dict_unusualDetail.value);
};
onMounted(() => {
  initPostUser();
});
</script>

<style lang="scss" scoped>
/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.2);
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
/*定义滑块
     内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #b3b3b3;
}
.user {
  width: 100%;
  height: 86vh;
  display: flex;
  .user-left {
    width: 70%;
    height: 100%;
  }
  .user-right {
    width: 26%;
    height: 100%;
    .user-right-top {
      width: 100%;
      height: 50%;
      // overflow-y: auto;
      // overflow-x: hidden;
    }
    .user-right-bottom {
      width: 100%;
      height: 50%;
    }
  }
}
</style>
